<template>
  <div class="main">
    <div class="topBar">
      <div :class="'examBar'+ ' '+ (this.firstURL ? 'selected': '') ">
        <div class="examBarTop">
          <p @click="selectFirst">{{selectedType.typeName}}<span v-if="number(selectedType.typeName)">({{number(selectedType.typeName)}})</span></p>
          <img src="../../assets/img/icon/sanjiao.svg" @click="clickSanjiao">
        </div>
        <div class="examBarBottom">
<!--          <img src="../../assets/img/icon/personal_file_Sbar.png">-->
        </div>
      </div>
      <div :class="'appealBar'+ ' '+ (this.firstURL ? '': 'selected')"><p  @click="selectSecond">申诉<span v-if="Enumber.appeal>0">({{Enumber.appeal}})</span></p></div>
      <div class="manageBar" @click="changeState1">
<!--      <img src="../../assets/img/icon/flag.svg">-->
        <div :class="(this.$store.state.indexState1 ? 'manageImg2': 'manageImg')"></div>
        <p :id="(this.$store.state.indexState1 ? 'yellow': '')">{{(this.$store.state.indexState1 ? '完成': '管理')}}</p>
      </div>
    </div>
    <router-view id = "view"></router-view>
    <div class="cover" v-if="indexCoverable"></div>
    <div id="dropList" v-if="dropDowming">
      <li v-for="(obj,index) in typeList" :key="obj.typeName" :class="( selectedType.typeName === obj.typeName ?  'inSelected' : '')" :id="(index == typeList.length - 1 ? 'lastLi' : '')" @click="clickLi(index)">{{obj.typeName}}<span v-if="number(obj.typeName)>0">({{number(obj.typeName)}})</span></li>
    </div>
<!--    选择条目弹窗-->
    <div class="selectRelu" v-if="this.$store.state.showReluWindow">
      <p>请选择条例</p>
      <div class="subject">
        <div class="deyu size" :id="(reluSelectSubject == '德育' ? 'selected':'')" @click="clickde">德育</div>
        <div class="zhiyu size" :id="(reluSelectSubject == '智育' ? 'selected':'')" @click="clickzhi">智育</div>
        <div class="tiyu size" :id="(reluSelectSubject == '体育' ? 'selected':'')" @click="clickti">体育</div>
      </div>
      <ul>
        <li v-for="(data,index) in projectRelus" :key="data">
          <div :class="(reluSelectIndex == index ? 'circle1': 'circle2')" @click="clickReluCircle(index)"></div>
          <span :class="(reluSelectIndex == index ? 's1': 's2')">({{index + 1}}){{data}}</span>
        </li>
      </ul>
      <div class="submit">
        <div class="no" @click="clickNo">上一步</div>
        <div class="yes" @click="clickYes">确定</div>
      </div>
    </div>
<!--    无条目提示弹窗-->
    <div class="empty" v-if="this.$store.state.showEmpty">
    <img src="../../assets/img/icon/pluto-message-sent.svg">
      <p id="p1">空空如也…</p>
      <p id="p2">您还没有上传条例哦~</p>
      <p id="p3">请前往 我的-上传综测细则 进行上传</p>
      <div id="bottom">
        <div id="no" @click="noGo">取消</div>
        <div id="go" @click="goMine">现在去上传</div>
      </div>
    </div>
<!--    请选择加分-->
    <div class="indexAddMark" v-show="showAddMarkWindow">
      <p>请选择加分</p>
      <div class="add">
          <div class="item" v-for="(obj,index) in alwaysAddMark" :key="index" :id="(index == addMarkIndex ? 'blue': '')">
          <div class="circle" @click="clickAddMarkCircle(index)"></div>
          <span>{{obj.mark}}</span>
        </div>
        <div class="constItem" :id="(addMarkIndex == 7 ? 'blue': '')"> <div class="circle"  @click="clickAddMarkCircle(7)"></div><span>不加分</span></div>
        <div class="constItem" :id="(addMarkIndex == 8 ? 'blue': '')"><div class="circle"  @click="clickAddMarkCircle(8)"></div><input type="text" placeholder="请输入数字" v-model="inputMark"></div>
      </div>
      <div class="indexAddMarkbottom">
      <div id="back" @click="back">上一步</div>
        <div id="next" @click="next">下一步</div>
      </div>
    </div>
<!--    选择条目弹窗2-->
    <div class="selectRelu" v-if="this.$store.state.showReluWindow2">
      <p>请选择条例</p>
      <div class="subject">
        <div class="deyu size" :id="(reluSelectSubject == '德育' ? 'selected':'')" @click="clickde">德育</div>
        <div class="zhiyu size" :id="(reluSelectSubject == '智育' ? 'selected':'')" @click="clickzhi">智育</div>
        <div class="tiyu size" :id="(reluSelectSubject == '体育' ? 'selected':'')" @click="clickti">体育</div>
      </div>
      <ul>
        <li v-for="(data,index) in projectRelus" :key="data">
          <div :class="(reluSelectIndex == index ? 'circle1': 'circle2')" @click="clickReluCircle(index)"></div>
          <span :class="(reluSelectIndex == index ? 's1': 's2')">({{index + 1}}){{data}}</span>
        </li>
      </ul>
      <div class="submit">
        <div class="no" @click="clickNo2">上一步</div>
        <div class="yes" @click="clickYes2">确定</div>
      </div>
    </div>
<!--    确认界面-->
    <div class="makeSure" v-show="this.$store.state.showMakeSure">
      <div class="makeSureImg"></div>
      <p>是否确认通过?</p>
      <div class="bottom">
        <span id="not" @click="notSure">取消</span>
        <span id="yes" @click="sure">确定</span>
      </div>
    </div>
<!--    确认不通过-->
<!--    <div class="makeSure" v-show="this.$store.state.showMakeSure2">-->
<!--      <div class="makeSureImg2"></div>-->
<!--      <p>是否确认不通过?</p>-->
<!--      <div class="bottom">-->
<!--        <span id="not" @click="notSure2">取消</span>-->
<!--        <span id="yes" @click="sure2">确定</span>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Index2',
  data () {
    return {
      selectedType: {
        typeName: '综合',
        num: 78
      },
      firstURL: false,
      typeList: [
        {
          typeName: '综合',
          num: 78
        },
        {
          typeName: '社团',
          num: 61
        },
        {
          typeName: '学院',
          num: 0
        },
        {
          typeName: '个人',
          num: 17
        }
      ],
      appealNum: 6,
      indexCoverable: false,
      dropDowming: false,
      // projectRelus: [ '荣誉称号加分', '社会工作加分', '文化艺术、思想道德建设大苏打倒萨是', '见义勇为、拾金不昧、帮助老师同学', '在正规刊物或校级以上官方刊物', '本学年度参加无偿献血', '积极参加雪峰建设', '积极参加或组织其他非竞赛活动', '积极参加学校、广东省、全国' ],
      projectRelus: [],
      reluSelectSubject: '德育',
      reluSelectIndex: 2,
      addMarkIndex: 7,
      inputMark: null
    }
  },
  methods: {
    selectFirst: function () {
      console.log('1')
      this.$router.push({
        name: 'Eexam',
        params: {
          type: this.selectedType
        }
      })
      this.firstURL = true
    },
    selectSecond: function () {
      console.log('2')
      this.$router.push({
        name: 'appeal'
      })
      this.firstURL = false
    },
    clickSanjiao: function () {
      // this.$store.commit('changeBarCoverableState', true)
      this.indexCoverable = true
      this.dropDowming = true
    },
    clickLi: function (index) {
      this.selectedType = this.typeList[index]
      this.$router.push({
        name: 'Eexam',
        params: {
          type: this.selectedType
        }
      })
      this.indexCoverable = false
      this.dropDowming = false
      this.$store.commit('setIndexExamType', this.selectedType)
    },
    clickde: function () {
      this.reluSelectSubject = '德育'
      this.projectRelus = this.$store.state.relus[0].items
    },
    clickzhi: function () {
      this.reluSelectSubject = '智育'
      this.projectRelus = this.$store.state.relus[1].items
    },
    clickti: function () {
      this.reluSelectSubject = '体育'
      this.projectRelus = this.$store.state.relus[2].items
    },
    clickReluCircle: function (index) {
      this.reluSelectIndex = index
    },
    clickNo: function () {
      this.$store.commit('setYes', false)// 修改状态
      this.$store.commit('changeCoverableState', false)// 修改幕布
      this.$store.commit('setShowReluWindow', false)//  修改弹窗是否出现

      console.log(this.$store.state.yes)
    },
    clickYes: function () {
      var relu = {
        subject: this.reluSelectSubject,
        num: this.reluSelectIndex
      }
      this.$store.commit('setSelectedRelu', relu)
      this.$store.commit('setYes', true)// 修改状态
      var len = 0
      for (var i = 0; i < this.$store.state.relus.length; i++) {
        if (relu.subject == this.$store.state.relus[i].subject) {
          len = this.$store.state.relus[i].items.length
          console.log(len)
          break
        }
      }
      // console.log(relu.num >= len)

      this.$store.commit('changeCoverableState', false)// 修改幕布
      this.$store.commit('setShowReluWindow', false)//  修改弹窗是否出现
      if (relu.num >= len) {
        this.$store.commit('setYes', false)// 修改状态
        console.log('请选择')
        return
      }
      this.$store.commit('setAction', true) // 一次异步操作完成
      console.log(this.$store.state.yes)
      console.log(this.$store.state.selectedRelu)
    },
    goMine: function () {
      this.$store.commit('changeCoverableState', false)// 修改幕布
      this.$store.commit('setShowEmpty', false)//  修改弹窗是否出现
      this.$router.push({
        name: 'Emine'
      })
    },
    noGo: function () {
      this.$store.commit('changeCoverableState', false)// 修改幕布
      this.$store.commit('setShowEmpty', false)//  修改弹窗是否出现
    },
    changeState1: function () {
      // 修改管理状态
      var flag = !this.$store.state.indexState1
      this.$store.commit('setIndexState1', flag)
      if (flag) {
        this.$store.commit('setIndexState2', false)
      }
    },
    clickAddMarkCircle: function (i) {
      this.addMarkIndex = Number(i)
    },
    back: function () {
      // 返回上一步
      this.$store.commit('changeCoverableState', false)// 修改幕布
      this.$store.commit('setShowIndexAddMarkWindow', false)// 加分弹窗隐藏
    },
    next: function () {
      // 下一步
      // 切换弹窗
      // 提交加分到store
      this.$store.commit('setShowIndexAddMarkWindow', false)// 加分弹窗隐藏
      this.$store.commit('setShowReluWindow2', true)// 加分项弹窗2出现
      var add = 0
      if (this.addMarkIndex < this.alwaysAddMark.length) {
        add = this.alwaysAddMark[this.addMarkIndex].mark
      } else if (this.addMarkIndex == 8 && this.inputMark != null) {
        add = this.inputMark
      }
      this.$store.commit('setAddMark', add)
      console.log(this.$store.state.addMark)
    },
    clickNo2: function () {
      // 条目弹窗2上一步
      console.log('22222222222222222222')
      this.$store.commit('setShowIndexAddMarkWindow', true)// 加分弹窗出现
      this.$store.commit('setShowReluWindow2', false)// 加分项弹窗2隐藏
    },
    clickYes2: function () {
      // 条目弹窗2完成
      var relu = {
        subject: this.reluSelectSubject,
        num: this.reluSelectIndex
      }
      this.$store.commit('setSelectedRelu', relu)
      this.$store.commit('setYes', true)// 修改状态
      var len = 0
      for (var i = 0; i < this.$store.state.relus.length; i++) {
        if (relu.subject == this.$store.state.relus[i].subject) {
          len = this.$store.state.relus[i].items.length
          console.log(len)
          break
        }
      }
      // console.log(relu.num >= len)
      if (relu.num >= len) {
        this.$store.commit('setYes', false)// 修改状态
        console.log('请选择')
        return
      }
      // this.$store.commit('changeCoverableState', false)// 修改幕布
      this.$store.commit('setChannel', 2) // 通道2
      this.$store.commit('setShowMakeSure', true) // 到确认
      this.$store.commit('setShowReluWindow2', false)//  修改弹窗是否出现

      // this.$store.commit('setAction2', true) // 一次异步操作完成
      console.log(this.$store.state.yes)
      console.log(this.$store.state.selectedRelu)
    },
    sure: function () {
      // 确认
      var chanel = this.$store.state.channel // 通道
      console.log(chanel)
      if (chanel == 1) {
        this.$store.commit('setAction', true)
      } else if (chanel == 2) {
        this.$store.commit('setAction2', true)
      }
      this.$store.commit('changeCoverableState', false)// 隐藏cover
      this.$store.commit('setShowMakeSure', false)// 隐藏确认
    },
    notSure: function () {
      // 不确定
      this.$store.commit('changeCoverableState', false)// 隐藏cover
      this.$store.commit('setShowMakeSure', false)// 隐藏确认
    },
    sure2: function () {
      // 确认不通过
      // 选中的申诉不通过
      console.log('确认不通过')
      this.$store.commit('changeCoverableState', false)// 隐藏cover
      this.$store.commit('setShowMakeSure2', false)// 隐藏确认
    },
    notSure2: function () {
      // 不确认不通过
      console.log('不确认不通过')
      this.$store.commit('changeCoverableState', false)// 隐藏cover
      this.$store.commit('setShowMakeSure2', false)// 隐藏确认
    },
    number: function (type) {
      if (type == '综合') return this.$store.state.Enumber.all
      else if (type == '个人') return this.$store.state.Enumber.stu
      else if (type == '社团') return this.$store.state.Enumber.asso
      else if (type == '学院') return this.$store.state.Enumber.college
    }
  },
  computed: {
    alwaysAddMark: function () {
      return this.$store.state.alwaysAddItems
    },
    showAddMarkWindow: function () {
      return this.$store.state.showIndexAddMarkWindow
    },
    Enumber: function () {
      return this.$store.state.Enumber
    }
  },
  mounted () {
    axios({
      // lyl: 更新为cloud接口 对应rules模块
      url: '/studentevaluation/api/rules/rules?college=' + this.$store.getters.getLoginUser.collegeName
    }).then(res => {
      console.log(res)
      var data = res.data.data
      var relus = [
        {
          subject: '德育',
          items: []
        },
        {
          subject: '智育',
          items: []
        },
        {
          subject: '体育',
          items: []
        }
      ]
      for (var i = 0; i < data.length; i++) {
        var obj = data[i]
        if (obj.subject > 2 || obj.subject < 0) continue
        relus[obj.subject].items.push(obj.rule)
      }
      console.log(relus)
      this.$store.commit('setRelus', relus)
      this.clickde()
    })
  },
  watch: {
    Enumber (o, ne) {
      if (this.selectedType.typeName == '综合') this.selectedType.num = this.$store.state.Enumber.all
      else if (this.selectedType.typeName == '个人') this.selectedType.num = this.$store.state.Enumber.stu
      else if (this.selectedType.typeName == '社团') this.selectedType.num = this.$store.state.Enumber.asso
      else if (this.selectedType.typeName == '学院') this.selectedType.num = this.$store.state.Enumber.college
      console.log(ne)
    }
  }
}
</script>

<style scoped lang="scss">
  .main{
    width: 100%;
    height: 100%;
    background: $background-color;
    overflow: hidden;
  }
  .topBar{
    width: 100%;
    height: px2rem(44);
    background:rgba(255,255,255,1);
    position: fixed;
    display: flex;
    .examBar{
      font-size:px2rem(14);
      font-family:PingFang SC;
      font-weight:500;
      line-height:px2rem(20);
      color:rgba(38,38,38,1);
      width: px2rem(88);
      margin-left: px2rem(46);
      height: 100%;
      display: flex;
      flex-direction: column;
      /*background: url("../../assets/img/icon/personal_file_Sbar.png");*/
      /*background-size: 100% 100%;*/
      .examBarTop{
        width: 100%;
        height: px2rem(30);
        display: flex;
        justify-content: space-evenly;
        p{
          position: relative;
          top: px2rem(10);
          /*left: px2rem(8);*/
        }
        img{
          width: px2rem(12);
          height: px2rem(8);
          position: relative;
          top: px2rem(16);
          /*<!--left: px2rem(-8);-->*/
        }
      }
      .examBarBottom{
        width: 100%;
        flex-grow: 1;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .appealBar{
      font-size:px2rem(14);
      font-family:PingFang SC;
      font-weight:500;
      line-height:px2rem(20);
      color:rgba(38,38,38,1);
      opacity:1;
      width: px2rem(88);
      height: px2rem(44);
      margin-left: px2rem(46);
      display: flex;
      justify-content: center;
      /*align-items: center;*/
      p{
        position: relative;
        top: px2rem(10);
      }
    }
    .manageBar{
      #yellow{
        color:rgba(254,201,6,1);
      }
      margin-left: px2rem(31);
      width: px2rem(64);
      height: 100%;
      font-size:px2rem(14);
      font-family:PingFang SC;
      font-weight:500;
      line-height:px2rem(20);
      color:rgba(38,38,38,1);
      opacity:1;
      display: flex;
      align-items: center;
      img{
        width: px2rem(13);
        height: px2rem(16);
        margin-left: px2rem(13);
      }
      .manageImg{
        width: px2rem(13);
        height: px2rem(16);
        margin-left: px2rem(13);
        background: url("../../assets/img/icon/flag.svg");
        background-size: 100% 100%;
      }
      .manageImg2{
        width: px2rem(13);
        height: px2rem(16);
        margin-left: px2rem(13);
        background: url("../../assets/img/icon/flag_yellow.svg");
        background-size: 100% 100%;
      }
      p{
        margin-left: px2rem(5);
      }
    }
  }
  .selected{
    background: url("../../assets/img/icon/personal_file_Sbar.png");
    background-size: 100% 100%;
  }
  #view{
    width: 100%;
    height: px2rem(568);
    position: absolute;
    top: px2rem(44);
  }
  .cover{
    width: 100%;
    height: 100%;
    background:rgba(38,38,38,0.45);
    position: absolute;
    top: px2rem(44);
    z-index: 2;
  }
  #dropList{
    /*下拉单*/
    width: px2rem(160);
    /*height: px2rem(200);*/
    /*background: white;*/
    position: absolute;
    z-index: 3;
    top: px2rem(36);
    left: px2rem(10);
    list-style: none;
    display: flex;
    flex-direction: column;
    li{
      background: white;
      width: 100%;
      height: px2rem(46);
      font-size:px2rem(14);
      font-family:PingFang SC;
      font-weight:500;
      line-height:px2rem(20);
      color:rgba(38,38,38,1);
      display: flex;
      align-items: center;
      justify-content: center;
  }
    .inSelected{
      color:rgba(2,164,237,1);
    }
    #lastLi{
      /*border: px2rem(10) solid white;*/
      border-radius: 0 0 px2rem(6) px2rem(6);
    }
  }
  .selectRelu{
    width: px2rem(280);
    height: px2rem(507);
    float: left;
    position: absolute;
    bottom: px2rem(80);
    /*left: px2rem(48);*/
  left: calc(50% - #{px2rem(140)});
    background: white;
    border-radius:px2rem(31) px2rem(31) px2rem(31) px2rem(31);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
    p{
      width: px2rem(120);
      height: px2rem(33);
      margin-top: px2rem(20);
      font-size:px2rem(24);
      font-family:PingFang SC;
      font-weight:bold;
      line-height:px2rem(33);
      color:rgba(38,38,38,1);
    }
    .subject{
      width: 100%;
      margin-top: px2rem(22);
      display: flex;
      .size{
        width: px2rem(69);
        height: px2rem(42);
        background:rgba(245,245,245,1);
        font-size:px2rem(18);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(25);
        color:rgba(38,38,38,1);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius:px2rem(7);
      }
      .deyu{
          margin-left: px2rem(16);
      }
      .zhiyu{
        margin-left: px2rem(21);
      }
      .tiyu{
        margin-left: px2rem(20);
      }
      #selected{
        color:rgba(2,164,237,1);
        background:rgba(193,232,255,1);
      }
    }
    ul{
      height: px2rem(320);
      overflow: auto;
      list-style: none;
      margin-top: px2rem(8);
      width: 100%;
      /*display: flex;*/
      /*flex-direction: column;*/
      /*align-items: center;*/
      li{
        margin-top: px2rem(16);
        width: 100%;
        height: px2rem(22);
        display: flex;
        .circle1{
          margin-left: px2rem(16);
          width:px2rem(16);
          height:px2rem(16);
          border:px2rem(4) solid rgba(2,164,237,1);
          border-radius:50%;
          opacity:1;
        }
        .circle2{
          margin-left: px2rem(16);
          width:px2rem(16);
          height:px2rem(16);
          border:px2rem(2) solid rgba(188,191,196,1);
          border-radius:50%;
          opacity:1;
        }
        span{
          margin-left: px2rem(3);
          width: px2rem(209);
          font-size:px2rem(16);
          font-family:PingFang SC;
          font-weight:400;
          line-height:px2rem(22);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .s1{
          color:rgba(2,164,237,1);
        }
        .s2{
          color:rgba(188,191,196,1);
        }
      }
    }
    .submit{
      width: 100%;
      height: px2rem(70);
      background:rgba(241,241,241,1);
      opacity:1;
      border-radius:0px 0px px2rem(31) px2rem(31);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .no{
        width: px2rem(90);
        height: px2rem(44);
        margin-left: px2rem(18);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:px2rem(18);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(25);
        color:rgba(255,255,255,1);
        background: url("../../assets/img/icon/cancel.svg");
        background-size: 100% 100%;
      }
      .yes{
        width: px2rem(90);
        height: px2rem(44);
        margin-right: px2rem(18);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size:px2rem(18);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(25);
        color:rgba(255,255,255,1);
        background: url("../../assets/img/icon/determine.svg");
        background-size: 100% 100%;
      }
    }
  }
  .empty{
    width: px2rem(280);
    height: px2rem(350);
    background: white;
    float: left;
    position: absolute;
    /*left: px2rem(48);*/
    left: calc(50% - #{px2rem(140)});
    bottom: px2rem(158);
    border-radius:px2rem(31);
    z-index: 3;
    img{
      width: px2rem(123);
      height: px2rem(102);
      margin-left: px2rem(78);
      margin-top: px2rem(31);
    }
    #p1{
      font-size:px2rem(20);
      font-family:PingFang SC;
      font-weight:bold;
      line-height:px2rem(28);
      color:rgba(38,38,38,1);
      margin-top: px2rem(15);
      margin-left: px2rem(92);
    }
    #p2{
      font-size:px2rem(16);
      font-family:PingFang SC;
      font-weight:400;
      line-height:px2rem(22);
      color:rgba(38,38,38,1);
      margin-top: px2rem(28);
      margin-left: px2rem(64);
    }
    #p3{
      font-size:px2rem(14);
      font-family:PingFang SC;
      font-weight:400;
      line-height:px2rem(20);
      color:rgba(188,191,196,1);
      margin-left: px2rem(31);
      margin-top: px2rem(6);
    }
    #bottom{
      width: 100%;
      height: px2rem(70);
      background:rgba(241,241,241,1);
      opacity:1;
      border-radius:0px 0px px2rem(31) px2rem(31);
      position: absolute;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size:px2rem(18);
      font-family:PingFang SC;
      font-weight:500;
      line-height:px2rem(25);
      color:rgba(255,255,255,1);
      #no{
        margin-left: px2rem(16);
        width: px2rem(80);
        height: px2rem(44);
        background: url("../../assets/img/icon/cancel.svg");
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      #go{
        margin-right: px2rem(16);
        height: px2rem(44);
        width: px2rem(116);
        background: -webkit-linear-gradient(to right,#59C2FF, #9D6AE8); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(to right,#59C2FF, #9D6AE8); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(to right,#59C2FF, #9D6AE8); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right,#59C2FF, #9D6AE8); /* 标准的语法 */
        border-radius: px2rem(31);
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .indexAddMark{
    width: px2rem(280);
    height: px2rem(350);
    background:rgba(255,255,255,1);
    opacity:1;
    border-radius:px2rem(31);
    position: absolute;
    float: left;
    /*left: px2rem(48);*/
    left: calc(50% - #{px2rem(140)});
    bottom: px2rem(158);
    z-index: 3;
    p{
      margin-left: px2rem(80);
      margin-top: px2rem(20);
      font-size:px2rem(24);
      font-family:PingFang SC;
      font-weight:bold;
      line-height:px2rem(33);
      color:rgba(38,38,38,1);
    }
    .add{
      margin-top: px2rem(31);
      width: 100%;
      height: px2rem(184);
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 50%;
        font-size:px2rem(18);
        font-family:PingFang SC;
        font-weight:400;
        line-height:px2rem(25);
        color:rgba(188,191,196,1);
        opacity:1;
        display: flex;
      }
      .constItem{
        width: 50%;
        font-size:px2rem(18);
        font-family:PingFang SC;
        font-weight:400;
        line-height:px2rem(25);
        color:rgba(188,191,196,1);
        opacity:1;
        display: flex;
      }
      .circle{
        width: px2rem(16);
        height: px2rem(16);
        border:px2rem(2) solid rgba(188,191,196,1);
        border-radius:50%;
        margin-left: px2rem(42);
        opacity:1;
      }
      span{
        margin-left: px2rem(15);
        font-size:px2rem(18);
        font-family:PingFang SC;
        font-weight:400;
        line-height:px2rem(25);
        color:rgba(188,191,196,1);
      }
      input{
        width: px2rem(59);
        height: px2rem(28);
        margin-left: px2rem(8);
        /*margin-top: px2rem(17);*/
        position: relative;
        top: px2rem(-1);
        border:px2rem(1) solid rgba(188,191,196,1);
        opacity:1;
        border-radius:px2rem(4);
        font-size:px2rem(10);
        font-family:PingFang SC;
        font-weight:400;
        line-height:px2rem(14);
        color:rgba(188,191,196,1);
        opacity:1;
      }
      input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        font-size:px2rem(10);
        font-family:PingFang SC;
        font-weight:400;
        line-height:px2rem(14);
        color:rgba(188,191,196,1);
        opacity:1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      input:-moz-placeholder, textarea:-moz-placeholder {
        font-size:px2rem(10);
        font-family:PingFang SC;
        font-weight:400;
        line-height:px2rem(14);
        color:rgba(188,191,196,1);
        opacity:1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      input::-moz-placeholder, textarea::-moz-placeholder {
        font-size:px2rem(10);
        font-family:PingFang SC;
        font-weight:400;
        line-height:px2rem(14);
        color:rgba(188,191,196,1);
        opacity:1;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      input:-ms-input-placeholder, textarea:-ms-input-placeholder {
        font-size:px2rem(10);
        font-family:PingFang SC;
        font-weight:400;
        line-height:px2rem(14);
        color:rgba(188,191,196,1);
        opacity:1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      /*获得焦点隐藏polaceholder*/
      /* WebKit浏览器 */
      input:focus::-webkit-input-placeholder { color:transparent; }
      /* Firefox 4 至 18 */
      input:focus:-moz-placeholder { color:transparent; }
      /* Firefox 19+ */
      input:focus::-moz-placeholder { color:transparent; }
      /* IE 10+ */
      input:focus:-ms-input-placeholder { color:transparent; }
      /* 选中状态 */
      #blue{
        .circle{
          border:px2rem(4) solid rgba(2,164,237,1);
        }
        color:rgba(2,164,237,1);
      }
    }
    .indexAddMarkbottom{
      width: 100%;
      height: px2rem(70);
      position: absolute;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /*background: black;*/
      #back{
        width: px2rem(90);
        height: px2rem(44);
        font-size:px2rem(18);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(25);
        color:rgba(255,255,255,1);
        background: #F84545;
        border-radius: px2rem(31);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: px2rem(18);
      }
      #next{
        width: px2rem(90);
        height: px2rem(44);
        font-size:px2rem(18);
        font-family:PingFang SC;
        font-weight:500;
        line-height:px2rem(25);
        color:rgba(255,255,255,1);
        background: -webkit-linear-gradient(to right,#59C2FF, #9D6AE8); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(to right,#59C2FF, #9D6AE8); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(to right,#59C2FF,#9D6AE8); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right,#59C2FF, #9D6AE8); /* 标准的语法 */
        border-radius: px2rem(31);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: px2rem(18);
      }
    }
  }
  .makeSure{
    width:px2rem(280);
    height:px2rem(350);
    background:rgba(255,255,255,1);
    opacity:1;
    border-radius:px2rem(31);
    z-index: 3;
    position: absolute;
    float: left;
    /*left: px2rem(48);*/
    left: calc(50% - #{px2rem(140)});
    bottom: px2rem(158);
    .makeSureImg{
      background: url("../../assets/img/icon/list-is-empty-3.svg");
      background-size: 100% 100%;
      width: px2rem(151);
      height: px2rem(148);
      margin-top: px2rem(26);
      margin-left: px2rem(64);
    }
    .makeSureImg2{
      background: url("../../assets/img/icon/pluto-unsubscribed.svg");
      background-size: 100% 100%;
      width: px2rem(151);
      height: px2rem(148);
      margin-top: px2rem(26);
      margin-left: px2rem(64);
    }
    p{
      font-size:px2rem(24);
      font-family:PingFang SC;
      font-weight:bold;
      line-height:px2rem(33);
      color:rgba(38,38,38,1);
      opacity:1;
      margin-top: px2rem(24);
      margin-left: px2rem(56);
    }
    .bottom{
      width:100%;
      height:px2rem(70);
      background:rgba(241,241,241,1);
      opacity:1;
      border-radius:0 0 px2rem(31) px2rem(31);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      bottom: 0;
    }
    span{
      width: px2rem(80);
      height: px2rem(44);
      border-radius: px2rem(31);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:px2rem(18);
      font-family:PingFang SC;
      font-weight:500;
      line-height:px2rem(25);
      color:rgba(255,255,255,1);
    }
    #not{
      margin-left: px2rem(25);
      background: #F84545;
    }
    #yes{
      margin-right: px2rem(25);
      background: -webkit-linear-gradient(to right,#59C2FF, #9D6AE8); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(to right,#59C2FF, #9D6AE8); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(to right,#59C2FF, #9D6AE8); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right,#59C2FF, #9D6AE8); /* 标准的语法 */
    }
  }
</style>
